<style lang="scss">
  @import '../../assets/styles/common.css';

  .main {
    height: 100vh;
    .main-header {
      background-color: #409eff;
      color: #333;
      padding: 0;
      display: inline-flex;
      height: 60px !important;
      position: relative;
      z-index: 9;
      .main-logo {
        overflow: hidden;
        .logo-box {
          width: 50px;
          height: 50px;
          float: left;
          margin: 4px 12px 0 20px;
          .main-img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .main-title {
        cursor: default;
        display: block;
        float: left;
        height: 60px;
        line-height: 60px;
        color: #ffffff;
        font-size: 25px;
      }

      .main-time {
        color: #fff;
        cursor: pointer;
        font-size: 16px;
        line-height: 60px;
        // border:1px solid red;
      }
      .main-user {
        position: absolute;
        right: 0;
        display: flex;
        height: 100%;
        overflow: hidden;
        .edit-box {
          padding-right: 7px;
        }
        .main-home-exit {
          float: left;
          // padding: 5px 0;
          .main-exit {
            cursor: pointer;
            float: left;
            width: 30px;
            text-align: center;
            height: 50px;
            line-height: 55px;
            padding: 5px;
            color: #fff;
            .el-icon-switch-button {
              font-size: 18px;
            }
          }
          .main-exit:hover {
            // background-color: #308ee5;
          }
          .main-home {
            cursor: pointer;
            float: left;
            width: 30px;
            text-align: center;
            height: 50px;
            line-height: 55px;
            padding: 5px;
            color: #fff;
            .el-icon-s-home {
              font-size: 18px;
            }
          }
          .main-home:hover {
            // background-color: #308ee5;
          }
        }
        .main-user-box {
          cursor: pointer;
          float: left;
          height: 60px;
          line-height: 62px;
          color: #fff;
          padding-left: 10px;
          padding-right: 20px;
          .main-user-name {
            font-size: 16px;
            display: flex;
            align-items: center;
            // width: 32px;
            // margin: 12px;
            img {
              width: 32px;
              height: 32px;
            }
          }
          .el-icon-user-solid {
            font-size: 18px;
          }
        }
        .main-user-box:hover {
          // background-color: #308ee5;
        }
      }
    }
    .main-content {
      height: 100%;
      width: 100%;
      .main-aside {
        width: 201px !important;
        // 菜单栏
        .el-menu {
          background-color: #f7f9fb;
          height: 100%;
          // border: 1px solid green;
          .el-menu-item {
            padding: 0px !important;
            .menuName{
              font-size: 16px;
            }
          }
          .is-active {
            background-color: #ffffff !important;
            border-left: 6px solid #369fff;
          }
        }
      }

      .main-main {
        padding: 0px !important;
        // border-left: 1px solid #dddddd;
      }
      /*滚动条样式*/
      .main-main::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 2px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 4px;
      }
      .main-main::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: rgba(0, 0, 0, 0.2);
      }
      .main-main::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0;
        background: rgba(0, 0, 0, 0.1);
      }
    }
    .edit-box {
      display: flex;
      align-items: center;
      height: 100%;
      i {
        font-size: 25px;
        color: #fff;

        &:hover {
          // color: #007cfd !important;
          cursor: pointer;
        }
      }
    }
  }
  .cz {
    .xx {
      width: 32px;
      float: left;
      padding-top: 12px;
      margin-left: 16px;
      img {
        width: 100%;
      }
    }
    .user_info{
      // width: 100px;
      float: left;
      padding:  0 20px;
      padding-top: 10px;
      cursor: default;
      p{
        line-height: 20px;
        text-align: center;
        color: #ffffff;
        font-size: 15px;
      }
    }
  }

  .p_style {
    color: #ffffff;
    span {
      display: inline-block;
      width: 100%;
    }
  }
</style>

<template>
  <el-container class="main">
    <!-- 顶栏容器 -->
    <el-header class="main-header">
      <!-- 标题 -->
      <div class="main-logo">
        <div class="logo-box">
          <img class="main-img"
               src="../../assets/images/logo60x60.png"
               alt="高新区">
        </div>
        <span class="main-title">网络理政</span>
      </div>
      <!-- 信息栏 -->
      <!-- <div class="main-time"><span class="el-icon-watch"></span> {{nowWeekNum}} | {{nowWeekNumber}} | {{nowDateTime}} </div> -->
      <!-- 菜单栏 -->
      <!-- <el-tabs v-model="activeIndex" @tab-click="skipPage">
        <el-tab-pane v-for="(item,index) in menuData" :key="index" :name="item.code">
          <span slot="label"><i :class="item.icon"></i> {{item.name}}</span>
        </el-tab-pane>
      </el-tabs> -->
      <!-- 操作 -->
      <div class="main-user">
        <div class="edit-box">
          <myFullscreen style="margin-right: 20px;"></myFullscreen>
          <!-- <el-tooltip effect="dark"
                      content="返回首页"
                      placement="bottom-start"
                      v-if="backHomeShow==true">
            <i @click.stop="goHome"
               class="iconfont icon-01-home-fill"
               style="margin-right: 20px;"></i>
          </el-tooltip> -->
          <el-tooltip effect="dark"
                      content="退出"
                      placement="bottom-start">
            <i @click.stop="loginOut"
               class="iconfont icon-01-poweroff"></i>
          </el-tooltip>
        </div>
        <div class="cz">
          <div class="xx">
            <img style="margin-right:-30px;"
                 src="../../assets/images/headPortrait.png" />
          </div>
          <div class="user_info">
            <p>
              {{userInfo.userName}}
            </p>

            <p>
              {{userInfo.deptShort}}
            </p>
          </div>
        </div>

      </div>
    </el-header>

    <el-container class="main-content">
      <!-- 菜单栏 -->
      <el-aside class="main-aside">
        <el-menu router
                 :default-active="$route.path"
                 class="el-menu-vertical"
                 background-color="transparent"
                 text-color="#666"
                 :unique-opened="true">
          <el-menu-item v-for="(item,index) in menuData"
                        :key="index"
                        :index="item.path">
            <template slot="title">
              <i :class="item.icon"
                 style="margin:0 10px 0 30px"></i>
              <span class="menuName">{{item.name}}</span>
            </template>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 主要区域容器 -->
      <el-main class="main-main">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import myFullscreen from '@/components/my-fullscreen'
  export default {
    components: { myFullscreen },
    data () {
      return {
        activeIndex: 'whHome', // 菜单默认选中索引
        userInfo: JSON.parse(sessionStorage.getItem('GOVERNANCE_USER_INFO')), // 用户信息
        menuData: JSON.parse(sessionStorage.getItem('GOVERNANCE_USER_INFO')).menuEntityList, // 菜单数据
        nowDateTime: '',
        nowWeekNum: '',
        nowWeekNumber: '',
        backHomeShow: true
      }
    },
    methods: {
      // 当前日期
      nowDate () {
        const _this = this // 声明一个变量指向Vue实例this，保证作用域一致
        this.timer = setInterval(() => {
          _this.nowDateTime = _this.$moment(new Date()).format('YYYY年MM月DD日 HH时mm分ss秒') // 修改数据date
        }, 1000)
      },
      // 当前周
      nowWeek () {
        const _this = this
        _this.nowWeekNum = _this.$moment(new Date()).format('第WW周')
        _this.nowWeekNumber = _this.$moment(new Date()).format('dddd')
      },
      // 今日天气
      nowWeather () {
        // $.ajax({
        //   type: "POST",//默认是GET
        //   url: "http://api.map.baidu.com/telematics/v3/weather",
        //   dataType: "jsonp",
        //   data: {
        //     location: '成都', // 城市
        //     output: "json", // 格式
        //     ak: "ohA7QHfg0BBrpiY4kyuIAAsD" // 百度地图ak
        //   },
        //   success: function (data) {
        //     console.log(data);
        //   }
        // });
      },
      // 获取菜单
      // getMenuData () {
      //   let roleList = this.userInfo.roleList
      //   // roleList = ['10000', '10001', '10010', '10086'];
      //   let menuList = this.$store.state.menuStore.menuList
      //   // 根据 roleList 过滤 menuList
      //   for (let menu of menuList) {
      //     let flag = false
      //     let roleList2 = menu.meta.role
      //     for (let role2 of roleList2) {
      //       for (let role of roleList) {
      //         if (role === role2) {
      //           flag = true
      //           break
      //         }
      //       }
      //     }
      //     if (flag) {
      //       this.menuData.push(menu)
      //     }
      //   }
      //   if (sessionStorage.getItem('activeIndex')) return
      //   sessionStorage.setItem('activeIndex', this.activeIndex)
      //   this.$router.push({ path: this.menuData[0].path })
      // },
      // 跳转页面
      skipPage (tab) {
        this.activeIndex = tab.code
        this.$router.push({ path: tab.path })
      },
      // 退出登录
      loginOut () {
        this.$confirm('确认退出？', '提示', {
          confirmButtonText: '确定',
          type: 'warning'
        })
          .then(() => {
            if (process.env.NODE_ENV === 'development') {
              sessionStorage.removeItem('GOVERNANCE_USER_INFO')
              sessionStorage.removeItem('activeIndex')
              this.$router.push('/login')
              return
            }
            sessionStorage.removeItem('GOVERNANCE_USER_INFO')
            sessionStorage.removeItem('activeIndex')
            window.location.href = 'http://118.122.86.3:80/government/#/login'
          })
          .catch(() => { })
      },
      // 返回首页
      goHome () {
        window.location.href = 'http://118.122.86.3:80/government/#/blHome'
      }
    },
    mounted () {
      // this.getMenuData()
      this.activeIndex = this.$route.path
      this.nowDate()
      this.nowWeek()
      this.nowWeather()
      let urlHref = window.location.href
      if(urlHref.indexOf('sysconfig')>0){
        this.backHomeShow = false
      }
    },
    beforeDestroy () {
      if (this.timer) {
        // 在Vue实例销毁前，清除我们的定时器
        clearInterval(this.timer)
      }
    }
  }
</script>
